<template>
  <div class="app-container">
    <el-form
      ref="elForm"
      :disabled="$route.query.isInfo"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="120px"
    >
      <h2 style="text-align: center">标准</h2>
      <h4 class="form-header h4">基本信息</h4>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="文件关键字" prop="keyword">
            <el-input
              v-model="formData.keyword"
              placeholder="请输入文件关键字"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标准名称" prop="standardName">
            <el-input
              v-model="formData.standardName"
              placeholder="请输入标准名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="代号及年代号" prop="standardCode">
            <el-input
              v-model="formData.standardCode"
              placeholder="请输入代号及年代号"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="替代情况" prop="replaceInfo">
            <el-input
              v-model="formData.replaceInfo"
              placeholder="请输入替代情况"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标准级别" prop="levelValue">
            <el-select
              v-model="formData.levelValue"
              placeholder="请选择标准级别"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_standard_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="标准领域" prop="domainValue">
            <el-select
              v-model="formData.domainValue"
              placeholder="请选择标准领域"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_standard_area"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标准性质" prop="natureValue">
            <el-select
              v-model="formData.natureValue"
              placeholder="请选择标准性质"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_standard_nature"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标准内容" prop="contentValue">
            <el-select
              v-model="formData.contentValue"
              placeholder="请选择标准性质"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_standard_content"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="有效性" prop="effectValue">
            <el-select
              v-model="formData.effectValue"
              placeholder="请选择有效性"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_availability_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计量状态" prop="calculateValue">
            <el-select
              v-model="formData.calculateValue"
              placeholder="请选择计量状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="dict in dict.type.sys_metering_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实施日期" prop="executiveDate">
            <el-date-picker
              v-model="formData.executiveDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择实施日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布日期" prop="pushDate">
            <el-date-picker
              v-model="formData.pushDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择发布日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="宣贯日期" prop="publicityDate">
            <el-date-picker
              v-model="formData.publicityDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择宣贯日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="入库时间" prop="inDate">
            <el-date-picker
              v-model="formData.inDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择入库时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="总数量" prop="totalNum">
            <el-input-number
              :style="{ width: '100%' }"
              v-model="formData.totalNum"
              placeholder="总数量"
              :step="1"
              controls-position="right"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="当前库存数量" prop="currentNum">
            <el-input-number
            :disabled="true"
              :style="{ width: '100%' }"
              v-model="formData.currentNum"
              placeholder="当前库存数量"
              :step="1"
              controls-position="right"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">附件信息</h4>
      <el-form-item label="" prop="fileUrl" style="position: relative">
        <!-- <img
          v-if="$route.query.isInfo"
          src="@/assets/images/watermark.png"
          style="width: 200px; position: absolute"
          :style="{
            top: Math.random() * 45 - 30 + 'px',
            right: Math.random() * 90 + 30 + 'px',
            transform: 'rotate(' + Math.abs(Math.random() * 45 - 360) + 'deg)',
          }"
        /> -->
        <FileUpload
          :isDelete="!$route.query.isInfo"
          v-model="formData.fileUrl"
        ></FileUpload>
      </el-form-item>

      <el-col :span="24">
        <el-form-item
          label-width="0"
          style="text-align: center; margin-top: 30px"
        >
          <el-button
            v-if="!$route.query.isInfo"
            type="primary"
            @click="submitForm"
            >提交</el-button
          >
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  standardAdd,
  updategStandard,
  standardInfo,
} from "@/api/system/standard.js";

export default {
  components: {},
  dicts: [
    "sys_standard_level",
    "sys_standard_area",
    "sys_standard_nature",
    "sys_standard_content",
    "sys_metering_status",
    "sys_availability_type",
  ],

  props: [],
  data() {
    return {
      formData: {
        fileCode: undefined,
        userId: undefined,
        levelValue: undefined,
        standardName: undefined,
        domainValue: undefined,
        natureValue: undefined,
        contentValue: undefined,
        effectValue: undefined,
        calculateValue: undefined,

        isApplyValue: undefined,
        pushDate: null,
        publicityDate: null,
        inDate: null,
        keyword: "",
        currentNum: undefined,
        replaceInfo: "",
        standardCode: "",
        totalNum: undefined,
      },
      rules: {
        // fileCode: [
        //   {
        //     required: true,
        //     message: "请输入受控编号",
        //     trigger: "blur",
        //   },
        // ],
        
        // keyword: [
        //   {
        //     required: false,
        //     message: "请输入关键字",
        //     trigger: "change",
        //   },
        // ],
        // levelValue: [
        //   {
        //     required: true,
        //     message: "请选择文件类型",
        //     trigger: "change",
        //   },
        // ],
        // fileUrl: [
        //   {
        //     required: true,
        //     message: "附件不能为空",
        //     trigger: "change",
        //   },
        // ],
        standardName: [
          {
            required: true,
            message: "请输入标准名称",
            trigger: "blur",
          },
        ],
        // domainValue: [
        //   {
        //     required: true,
        //     message: "请选择标准领域",
        //     trigger: "change",
        //   },
        // ],
        // natureValue: [
        //   {
        //     required: true,
        //     message: "请选择标准性质",
        //     trigger: "change",
        //   },
        // ],
        // contentValue: [
        //   {
        //     required: true,
        //     message: "请选择标准内容",
        //     trigger: "change",
        //   },
        // ],
        // effectValue: [
        //   {
        //     required: true,
        //     message: "请选择有效值",
        //     trigger: "change",
        //   },
        // ],
        // calculateValue: [
        //   {
        //     required: true,
        //     message: "请选择计量状态",
        //     trigger: "change",
        //   },
        // ],
        // pushDate: [
        //   {
        //     required: false,
        //     message: "请选择发布日期",
        //     trigger: "change",
        //   },
        // ],
        // publicityDate: [
        //   {
        //     required: false,
        //     message: "请选择宣贯日期",
        //     trigger: "change",
        //   },
        // ],
        // inDate: [
        //   {
        //     required: false,
        //     message: "请选择入库日期",
        //     trigger: "change",
        //   },
        // ],
        // currentNum: [
        //   {
        //     required: false,
        //     message: "当前库存数量",
        //     trigger: "blur",
        //   },
        // ],
        // totalNum: [
        //   {
        //     required: true,
        //     message: "请输入总数量",
        //     trigger: "blur",
        //   },
        // ],
        // replaceInfo: [
        //   {
        //     required: true,
        //     message: "替代情况",
        //     trigger: "blur",
        //   },
        // ],
        // standardCode: [
        //   {
        //     required: true,
        //     message: "代号及年代号",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() {},
  methods: {
    getinfo() {
      standardInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
      });
    },

    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));

          query.levelName = this.dict.type.sys_standard_level.find(
            (i) => i.value === query.levelValue
          ).label;

          query.domainName = this.dict.type.sys_standard_area.find(
            (i) => i.value === query.domainValue
          ).label;
          query.natureName = this.dict.type.sys_standard_nature.find(
            (i) => i.value === query.natureValue
          ).label;
          query.contentName = this.dict.type.sys_standard_content.find(
            (i) => i.value === query.contentValue
          ).label;
          query.effectName = this.dict.type.sys_availability_type.find(
            (i) => i.value === query.effectValue
          ).label;
          query.calculateName = this.dict.type.sys_metering_status.find(
            (i) => i.value === query.calculateValue
          ).label;
          query.currentNum = query.totalNum
          if (this.formData.standardManagerId != undefined) {
            updategStandard(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            standardAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./standard" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
